<template>
	<view class="container">
		<div class="main-box card-style">
			<div class="history-title">📝识别记录</div>
			<div class="line"><u-line></u-line></div>
			<div class="history-list" v-if="historyList.length > 0">
				<u-collapse accordion>
					<u-collapse-item :title="item.createTime" v-for="(item,index) in historyList" :key="index">
						<u-album :urls="item.imageUrls" style="margin-top: 5px;"></u-album>
						<div style="margin-top: 5px;">
							<u--text :text="'识别结果：' + item.result" type="success" :bold="true"></u--text>
						</div>
					</u-collapse-item>
				</u-collapse> 
			</div>
			<div v-else>
				<u-empty mode="data"></u-empty>
			</div>
		</div>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getHistory
	} from '../../../api/dignosis';
	export default {
		data() {
			return {
				historyList: [],
				indexToDisease: {
					0: '正常',
					1: '糖尿病',
					2: '青光眼',
					3: '白内障',
					4: 'AMD',
					5: '高血压',
					6: '近视',
					7: '其他疾病/异常'
				},
			}
		},
		mounted() {
			this.getHistoryList();
		},
		methods: {
			getHistoryList() {
				getHistory().then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$refs.uToast.show({
							type: 'success',
							message: "获取诊断历史成功!",
							position: "top"
						});
						for (let i = 0; i < res.data.length; i++) {
							let obj = {
								createTime: '',
								leftKeyword: '',
								rightKeyword: '',
								imageUrls: [],
								result: ''
							}
							obj.createTime = res.data[i].createTime
							obj.leftKeyword = res.data[i].leftKeyword
							obj.rightKeyword = res.data[i].rightKeyword
							obj.imageUrls.push(res.data[i].leftFundus)
							obj.imageUrls.push(res.data[i].rightFundus)

							let array = res.data[i].result.split(',')
							for (let j = 0; j < array.length - 1; j++) {
								obj.result += this.indexToDisease[array[j]];
							}
							this.historyList.push(obj)
						}
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: "获取诊断历史失败!",
							position: "top"
						});
					}
				})
			}
		}
	}
</script>

<style>
	@keyframes moveIn {
		0% {
			opacity: 0;
			transform: translateY(12px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.card-style {
		border-radius: 4px;
		border: 1px solid #ebeef5;
		background-color: #fff;
		color: #303133;
		transition: .3s;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		animation: moveIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.main-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.history-title {
		font-size: 18px;
		font-weight: bold;
	}

	.line {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.history-list {
		flex: 1;
	}

	.keyword {
		display: flex;
		align-items: center;
	}
</style>